<template>
  <div class="myPlayer">
    <!-- <easy-player :video-url="url" :live="true"></easy-player> -->
    <div id="Player"></div>
  </div>
</template>
<script>
import EasyPlayer from "@easydarwin/easyplayer";

export default {
  name: "ocn-easyPlayer",
  data() {
    return {
      player: "",

      url: "ws://124.222.180.87:12431/webPlayer/37040326001310459603.live.flv",
    };
  },
  components: {
    // EasyPlayer,
  },
  created() {},
  mounted() {
    // 实例化播放器
    this.player = new WasmPlayer(null, "Player", this.callbackfun, {
      Height: true,
      fluent: true,
      live: true,
    });
    // 调用播放
    this.player.play(this.url, 1);
  },
  methods: {
    callbackfun(e) {
      console.log("callbackfun:", e);
    },
  },

  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.myPlayer {
  width: 100%;
  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的距离属性 width/height*/
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
